﻿<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" >
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
</head>
<body>
<div class="topPanel">

<a href="/">Документы</a> <a href="/">Аудио</a> <a href="/">Видео</a>
</div>
	

<div class="mainImage">
MAIN_IMAGE
</div>

<div class="mainForm" style="">
<input class="textBox" id="textBox" autocomplete ="off"  type="text" size="80" name="query" /><br/><br/>
</div>

<div class="hint">
<div class="subhint">
Доп. информация
</div>

</div>

<div class="menu">
MENU

<div class="menuElement"><div class="mEText">Category</div></div>
<div class="menuElement"><div class="mEText">Category</div></div>
<div class="menuElement"><div class="mEText">Category</div></div>
<div class="menuElement"><div class="mEText">Category</div></div>
</div>

<div class="content">
<div class="main">MAIN</div>
<div class="loading">LOAD</div>
<div class="searchResults"></div>

</div>

<div class="footer">
FOOTER
</div>

<script>

/* Pre-put setup */
$('.hint').animate({opacity: "0", top: 0}, 0);
$('.menu').animate({opacity: "0"}, 0);

/* End of Pre-put ****/


/* Ajax Setup for IE "no cache" */
$.ajaxSetup({cache:false}); 
    
$(document).ready(function(){
    
 flag = true;
 
    
 
  $('.menu').animate({opacity: "1"}, 500);
  
  
  
  
 
    $(".textBox").keydown(function(){
        
        $(".mainForm").animate({ left: "20", top: "50" }, 500);
        $(".mainImage").animate({opacity: "0"}, 10);  
        
        
        setTimeout(ajax, 0);
                        
        function ajax(){
            
        $.ajax({
            url: "scripts/serch.php?query=" + document.getElementById("textBox").value,
            success: function(data){
                
                if(data !== '')
                 {    
                   
                    $('.searchResults').html("<h3>Возможно мы знаем где искать:</h3>"+data);
                    
                    $('.searchResults').animate({ opacity: "1"}, 400)
                 } else
                  {
                   $('.searchResults').animate({ opacity: "0"}, 400)
                   }
                 
            }, 
           error: function (xhr, ajaxOptions, thrownError){
                    
                    alert(ajaxOptions);
                }    
        });
           
        }        
        
                
        
        if(flag)
         {
            $('.hint').animate({top: "+=330", opacity: "0.7"}, 1000); 
                        
      
           $.ajax({               
            url: 'scripts/show.php?q=queryForm',
            success: function(data) {
              $('.main').html(data);              
            }         
           });
                
            flag = false;  
         }       
       }); 
       
       
      
                                   
                   
        $('.hint').hover(
           function(){
             if(!flag)
            $('.hint').animate({opacity: "1"}, 100); 
        }, function(){
             if(!flag)
            $('.hint').animate({opacity: "0.7"}, 100); 
        } );
        
        
 });
</script>
</body>
</html>
